<template>
    <!-- html -->
    <div class="User">
        姓：<input type="text" v-model="firstName" /> <br />
        名：<input type="text" v-model="lastName" /> <br />
        全名：<span>{{ fullNameReadWrite }}</span>
        <button @click="changeName">点击</button>
    </div>
</template>



<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Person'>
import { computed, reactive, ref } from 'vue';

let firstName = ref("张")
let lastName = ref("三")

//计算属性 只读的  
let fullName = computed(() => {
    console.log(1)
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})

//计算属性 可读可写
let fullNameReadWrite = computed({
    get() {
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val) {
        const [str1, str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
    }
})

function changeName() {
    fullNameReadWrite.value = "li-si"
}

</script>

<style>
/* 样式 */
.User {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>